<template>
	<uni-popup ref="popup" type="center" class="cmd-popup">
		
		<view class="cmd-popup-payment">
			<view class="close" @tap="close">关闭</view>
			<input type="text" placeholder="请输入交易密码" value="" />
			<uni-captcha ref="uni_captcha" class="cmd-captcha"></uni-captcha>
			<uni-slider-verification @send="send" class="cmd-slider"></uni-slider-verification>
			<view class="cmd-btn"><button @tap="confirm">确认</button></view>
		</view>
	</uni-popup>
</template>

<script>
import uniSliderVerification from '@/components/uni-slider-verification/uni-slider-verification';
import uniCaptcha from '@/components/uni-captcha/uni-captcha';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: { uniSliderVerification, uniCaptcha, uniPopup },
	data() {
		return {};
	},
	mounted() {
		this.$refs.popup.open();
	},
	methods:{
		close(){
			this.$refs.popup.close();
			this.$emit("payment","")
		},
		confirm(){
			let params = {};
			this.$emit("payment",params)
		}
	}
};
</script>

<style lang="scss">
.cmd-popup {
	.cmd-popup-payment {
		width: 500rpx;
		background-color: #ffffff;
		padding: 30rpx 66rpx 98rpx 66rpx;
		.cmd-slider {
			margin-top: 40rpx;
		}
		.cmd-captcha {
			margin-top: 20rpx;
			height: 86rpx;
			background-color: #f6f6f6;
		}
	}
	input {
		height: 86rpx;
		padding: 0 20rpx;
		background-color: #f6f6f6;
	}
	.close{
		text-align: right;
		margin-bottom: 30rpx;
	}
}
.cmd-btn {
	button {
		color: #ffffff;
		background-color: #2b9f93;
		margin-top: 100rpx;
	}
}
</style>
